<template>
  <view class="youxue-city">
    <!-- 定位城市 -->
    <view class="container" style="padding-bottom: 0">
      <view class="youxue-title">定位城市</view>
      <view class="box box-column-center mt-10">
        <view class="mr-10">
          <view class="pointer youxue-button" @click="onSelect(currentCity)">
            {{ currentCity }}
          </view>
        </view>

        <!-- 重新定位 -->
        <view>
          <button
            class="uni-button uni-button-clear"
            :open-type="isAuth ? '' : 'openSetting'"
            @opensetting="onOpenSetting"
            @click="getLocationInfo"
          >
            <view class="cl-second pointer">
              <span class="icon icon-reload vt-middle"></span>
              <span class="fz-13 vt-middle">
                {{ isAuth ? "重新定位" : "去授权" }}
              </span>
            </view>
          </button>
        </view>
      </view>
    </view>

    <!-- 热门城市 -->
    <view class="hot-list container">
      <view class="youxue-title">热门城市</view>
      <view
        class="inline-block mt-10 mr-10"
        v-for="(item, index) in hots"
        :key="index"
      >
        <view class="pointer youxue-button" @click="onSelect(item)">
          {{ item }}
        </view>
      </view>
    </view>
    <view></view>

    <youxue-index-bar
      :index-list="citys"
      :scroll-top="scrollTop"
      @select="onSelect"
    ></youxue-index-bar>
  </view>
</template>

<script>
import youxueIndexBar from "@/components/indexBar";
import { getLocationInfo } from "@/utils/common";

// 城市数据
import citys from "./city.json";

citys.forEach((item) => {
  item.contents = item.citys;
  delete item.citys;
});

export default {
  name: "youxue-city",

  props: {
	select:Function,
    // 当前页面滚动高度
    scrollTop: {
      type: Number,
      default: 0,
    },
  },

  data() {
    return {
      citys,
      hots: [
        "全国",
        "北京",
        "上海",
        "广州",
        "深圳",
        "杭州",
        "南京",
        "成都",
        "重庆",
        "武汉",
        "长沙",
        "昆明",
      ],
      currentCity: "全国",
      isAuth: true,
    };
  },

  created() {
    this.getLocationInfo();
  },

  methods: {
    /**
     * 获取位置信息
     */
    async getLocationInfo() {
      if (!this.isAuth) return false;

      try {
        let data = await getLocationInfo();
        this.currentCity = data.result.addressComponent.city || "北京";
      } catch (err) {
        if (typeof err.isAuth == "boolean") this.isAuth = false;
      }
    },

    onOpenSetting(event) {
      if (event.detail.authSetting["scope.userLocation"]) {
        this.isAuth = true;
        this.getLocationInfo();
      }
    },

    /**
     * 城市选择回调
     */
    onSelect(city) {
		this.$props.select(city);
    },
  },

  components: {
    youxueIndexBar,
  },

  install(Vue) {
    Vue.component(this.name, this);
  },
};
</script>

<style lang="scss" scoped>
.youxue-city {
  .youxue-button {
    padding: 10upx 30upx;
    border: 1px solid $color-border;
  }

  .youxue-title {
    font-weight: bold;
  }
}
</style>
